<template>
  <div class="info">
    <h3>签约办理</h3>
    <el-row gutter="15">
      <el-col :span="12">
        <el-form-item label="合同名称" prop="contractName">
          <el-input v-model="formData.contractName" :readonly="type === 'read'" :style="{ width: '100%' }"
                    clearable placeholder="请输入合同名称" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="签约日期" prop="signDate">
          <el-date-picker v-model="formData.signDate" :readonly="type === 'read'" :style="{ width: '100%' }"
                          clearable format="YYYY-MM-DD HH:mm:ss" placeholder="请选择签约日期"
                          type="datetime" value-format="YYYY-MM-DD HH:mm:ss"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row gutter="15">
      <el-col :span="12">
        <el-form-item label="丙方姓名" prop="thirdPartyName">
          <el-input v-model="formData.thirdPartyName" :readonly="type === 'read'" :style="{ width: '100%' }"
                    clearable placeholder="请输入丙方姓名" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="丙方联系方式" prop="thirdPartyPhone">
          <el-input v-model="formData.thirdPartyPhone" :readonly="type === 'read'" :style="{ width: '100%' }"
                    clearable placeholder="请输入丙方联系方式" type="text"/>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row gutter="15">
      <el-col :span="12">
        <el-form-item label="入住合同" prop="agreementPath">
          <div v-if="type === 'read'">{{ formData.elderName }}的入住合同.pdf
            <a :href="formData.agreementPath" class="searchPdf">查看</a>
          </div>
          <el-upload v-else ref="agreementPath" :action="agreementPathAction"
                     :before-upload="agreementPathBeforeUpload" :file-list="agreementPathfileList" :headers="headers"
                     :on-remove="handleRemove" :on-success="(res) => handleSuccess(res)" accept=".pdf">
            <el-button icon="el-icon-upload" size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的文件</div>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {ElMessage} from 'element-plus'
import {getToken} from '@/utils/auth';

const formRef = ref()

const headers = {
  Authorization: 'Bearer ' + getToken(),
};
const data = reactive({
  formData: {
    contractName: undefined,
    signDate: null,
    thirdPartyName: undefined,
    thirdPartyPhone: undefined,
    agreementPath: null,
  },
  rules: {
    contractName: [{
      required: true,
      message: '请输入合同名称',
      trigger: 'blur'
    }],
    signDate: [{
      required: true,
      message: '请选择签约日期',
      trigger: 'change'
    }],
    memberName: [],
    memberPhone: [],
  }
})

const {
  formData,
  rules
} = toRefs(data)

const agreementPathAction = ref('/dev-api/common/upload')
const agreementPathfileList = ref([])

//上传之前的文件判断
function agreementPathBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2
  if (!isRightSize) {
    ElMessage.error('文件大小超过 2MB')
  }
  return isRightSize
}

const props = defineProps({
  transactFormInfo: {
    type: Object,
    default: () => {
    }
  },
  type: {
    type: String,
    default: '',
  }
})

watch(
    props,
    () => {
      formData.value = props.transactFormInfo;
    },
    {immediate: true}
);

//上传成功之后给属性pdfUrl赋值
const handleSuccess = (val) => {
  formData.value['agreementPath'] = val.url
}

//删除文件给属性pdfUrl赋值为空
const handleRemove = () => {
  formData.value['agreementPath'] = ''
}

const emit = defineEmits(['getFormData']);

watch((formData.value), (val) => {
  emit('getFormData', val)
}, {immediate: true})

defineExpose({
  rules
})
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>